// 移动端断点定义
$breakpoints: (
  xs: 576px,  // 超小屏幕 手机
  sm: 768px,  // 小屏幕 平板
  md: 992px,  // 中等屏幕 小桌面
  lg: 1200px, // 大屏幕 桌面
  xl: 1600px  // 超大屏幕
);

// 响应式混合宏
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

// 移动优先的混合宏
@mixin respond-from($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

// 常用的响应式工具类
.hide-on-mobile {
  @include respond-to(sm) {
    display: none !important;
  }
}

.hide-on-desktop {
  @include respond-from(md) {
    display: none !important;
  }
}

// 容器响应式
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  
  @include respond-from(sm) {
    max-width: 540px;
  }
  
  @include respond-from(md) {
    max-width: 720px;
  }
  
  @include respond-from(lg) {
    max-width: 960px;
  }
  
  @include respond-from(xl) {
    max-width: 1140px;
  }
}

// 弹性布局工具
.flex-container {
  display: flex;
  flex-wrap: wrap;
  
  @include respond-to(sm) {
    flex-direction: column;
  }
} 